<template>
  <div class="main-asset">
    <div class="main-container">
      <div class="gc_main">
        <div class="container cc_main">
          <!-- 标题栏 -->
          <div class="top_title flex">
            <h2>合约账户资产</h2>
            <div class="top_right">
              <p> <span>总资产折合</span>：{{Assinfos.usdt}} USDT≈ {{Assinfos.cny}} CNY <span>|</span> </p>
            </div>
          </div>
          <!-- 内容 -->
          <div class="hy-container">
            <div class="ass_list">
              <template>
                <el-table
                  :data="AssList"
                  style="width: 100%"
                  :default-sort = "{prop: 'date', order: 'descending'}"
                  >
                  <el-table-column
                    prop="name"
                    label="币种"
                    sortable
                    width="180">
                    <template slot-scope="scope" >
                      <div class="icon">
                        <img :src="scope.row.logo" alt="" srcset="" class="i_logo">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                      </div>
                      
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="usable"
                    label="可用"
                    sortable
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="disable"
                    label="保证金"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="usdt"
                    label="USDT"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="cny"
                    label="估值(CNY)"
                  >
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="primary"
                        @click="goTrade('/futures_trade',scope.row)">交易</el-button>
                      
                      <el-button
                        size="mini"
                        type="danger" plain
                        @click="showTBProp(scope.$index, scope.row)">划转</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 资产互转 -->
    <el-dialog
      title="资产互转"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>提币请划转至币币交易账户</span>
      <div class="tb_form">
        <el-form :model="formData">
          <el-form-item label="从">
            <el-col :span="8">
              <el-select v-model="formData.region" placeholder="请选择资产类型" size="mini">
                <el-option label="合约账户" value="1" ></el-option>
                <el-option label="币币账户" value="2"></el-option>
              </el-select>
            </el-col>
            <el-col class="line exch_icon" :span="3">
               <i class="iconfont icon-yqfqiehuan"></i>
            </el-col>
            <el-col :span="8">
              <el-select v-model="formData.region" placeholder="请选择资产类型" size="mini">
                <el-option label="币币账户" value="1" ></el-option>
                <el-option label="合约账户" value="2"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <div class="coin_name coin_ban">
          <p>币种：{{TbiCoin}}</p> 
          <p>币币账户余额：{{Coinbance.userusable}} {{TbiCoin}}</p>
          <p>合约账户余额：{{Coinbance.otherusable}} {{TbiCoin}}</p>
        </div>
        <el-form :model="formData" size="mini">
          <el-form-item label="数量">
            <el-input v-model="formData.number" type="number"></el-input>
          </el-form-item>
          <el-form-item label="交易密码">
            <el-input v-model="formData.tradpassword" type="password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="c2ccointradBtn()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { checkTradePassword } from "../../service/TradeService.js";
export default {
  data() {
    return {
      Assinfos:{},
      AssList:[],
      // 划转
      dialogVisible: false,
      PopData: "",
      TbiCoin: "",
      formData:{
        region:'1',
        type:'',
        number:'',
        coin:'',
        tradpassword:'',
      },
      Coinbance:{},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getcountcon();
    this.getconaccount();
  },
  methods: {
    // 获取资产账户折合
    getcountcon() {
      this.request(this.api.getcountcon).then(res => {
        if (res && res.code == "0") {
          this.Assinfos = res.data[0];
        }else{
          this.getDataFaild(res.msg || "获取数据失败");
          return false;
        }
      });
    },
    // 获取账户资产列表
    getconaccount() {
      return this.request(this.api.getconaccount).then(res => {
        if (res.code == "0") {
          this.AssList = res.data;
        } else {
          this.errMsg(res.msg);
          return;
        }
      });
    },
    //跳转
    goTrade(api, data) {
      const maincoinid= data.name;
      const coinid = data.blockname;
      const link ='/futures_trade?maincoinid='+maincoinid+'&coinid='+coinid+'&areaid='
      console.log(link);
      this.navigateTo(link);
      // this.navigateTo(api, {
      //   maincoinid: data.maincoinid,
      //   coinid: data.coinid
      // });
    },
    // 资金划转
    showTBProp(index, row){
      console.log(index, row);
      this.formData.number="";
      this.formData.tradpassword="";
      this.dialogVisible=true;
      this.PopData=row;
      this.TbiCoin=row.name;
      this.formData.coin=row.name;
      return this.contgetbalance();
    },
    // 查合约币种余额
    contgetbalance(){
      return this.request(this.api.contgetbalance,{coin:this.TbiCoin} ).then(res => {
        if (res!='') {
          this.Coinbance=res[0];
        } else {
          // this.errMsg(res.msg);
          return;
        }
      });
    },
    // 资金划转
    c2ccointradBtn() {
      if(this.formData.region==1){
        this.formData.type='out'
      }else if(this.formData.region==2){
        this.formData.type='in'
      }
      if(this.formData.number==''){
        this.errMsg('请输入数量');
        return;
      }
      if(this.formData.tradpassword==''){
        this.errMsg('请输入交易密码');
        return;
      }
      return this.request(this.api.concointrad, this.formData).then(res => {
        if (res.code == "0") {
          // 刷新资产
          this.successMsg(res.msg || "成功");
          this.getcountcon();
          this.getconaccount(); 
          this.dialogVisible = false;  
        } else {
          this.errMsg(res.msg);
          return;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main-asset {
  min-height: 800px;
  .top_title {
    justify-content: space-between;
    align-items: flex-end;
    h2 {
      font-size: 30px;
    }
    .top_right{
      p{font-size: 16px;}
      span{color: #9aa5b5;}
    }
  }
}
.hy-container{
  border-top: 1px solid #eeeeee;margin-top: 30px;
  .icon{display: flex; align-items:center;}
  .i_logo{width: 30px;height:30px;background: #9aa5b5;border-radius: 50%;}
  .trade-btn{color: #fff;background-color: #409eff;border-color: #409eff;width: 80px;}
}
.flex-between, .flex-between-center {
    display: flex;
    justify-content: space-between;
}
// 提币划转
.tb_form{
  margin-top: 30px;
  .coin_name{padding: 15px 0;}
  .coin_ban{
    p{line-height: 30px;}
  }
  .exch_icon{
    text-align: center;
    i{font-size: 30px;color: #1296db;}
  }
}
</style>
